
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>头像</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="/public/static/admin/uploads/set/{$setting['ico']}">
    <link href="/public/static/home/themes/css/login.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="/public/static/home/themes/css/base.css">
    <link type="text/css" rel="stylesheet" href="/public/static/home/themes/css/home.css">
    <script type="text/javascript" src="/public/static/home/themes/js/jquery.min.js"></script>
    <style>
        *{font-size:14px;}
    </style>
</head>

<body>
<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed b-line">
        <a href="javascript:history.back(-1)" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">个人头像</span>
        </div>
    </header>
    <section class="aui-scrollView">

        <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
            <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                <div class="" style="width:95%;height:430px;position:absolute;top:50%;margin-top:-215px;left:50%;margin-left:-47.5%;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                    <div id="clipArea" style="margin:10px;height: 350px;"></div>
                    <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                        <button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#03b24d;color: #FFFFFF;border:0;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存头像</button>
                    </div>
                </div>
            </div>
            {if condition="preg_match('/base64/',$user.photo)>0"}
            <div id="view" style="width:260px;height:260px;margin:100px auto 20px;background: url({$user.photo});" title="请上传头像"></div>
            {else /}
            <div id="view" style="width:260px;height:260px;margin:100px auto 20px;background: url(/public/static/admin/uploads/teacher_photo/{$user.photo});" title="请上传头像"></div>
            {/if}
            <div style="height:10px;"></div>
            <div class="" style="margin:0 auto;width:140px;height:32px;border-radius: 4px;background-color:#03b24d;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;position:relative;">
                点击上传头像
                <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
            </div>
        </div>


    </section>
{include file="public/footer3"}
</section>
<script src="/public/static/admin/layui/layui.js"></script>
<script type="text/javascript" src="/public/static/home/js/iscroll-zoom.js"></script>
<script type="text/javascript" src="/public/static/home/js/hammer.js"></script>
<script type="text/javascript" src="/public/static/home/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="/public/static/home/js/jquery.min.js"></script>
<script type="text/javascript" src="/public/static/home/js/jquery.photoClip.min.js"></script>

<script type="text/javascript">
    layui.use('upload', function() { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer, upload = layui.upload; //独立版的layer无需执行这一句
        //保存头像
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [260, 260],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [260, 260], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap').fadeOut();
                $('#view').css('background-size','100% 100%');
                console.log(dataURL);
                $.post("{:url('set/update_photo')}",{photo:dataURL},function(data){
                    layer.msg(data.msg,{time:2000,shade:0.7})
                })
            }
        });
    });
    //clipArea.destroy();

</script>

</body>
</html>
